<template>
    <div v-for="menu in menus" :key="menu.id">
        <el-menu-item-group :title="menu.name" v-if="menu.isGroup">
            <Menu :menus="menu.children" v-if="menu.children"></Menu>
        </el-menu-item-group>
        <el-sub-menu v-else-if="menu.children && !menu.isGroup" :index="menu.id">
            <template #title>
                <el-icon>
                    <component :is="menu.icon"></component>
                </el-icon>
                <span>{{ menu.name }}</span>
            </template>
            <Menu :menus="menu.children"></Menu>
        </el-sub-menu>
        <!--如果没有子菜单-->
        <el-menu-item :index="menu.id" v-else :route="menu.route">
            <el-icon>
                <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.name }}</span>
        </el-menu-item>
    </div>
</template>
<script setup type="ts">
defineOptions({
    name: 'Menu',
    inheritAttrs: false,
})
defineProps({
    menus: {
        type: Array,
        required: false
    }
});
</script>
